<template>
	<view class="filterbar">
		<view class=" flex nav justify-between">
			<!-- <span class=" flex align-center justify-center" @tap="filterOrder(0)">
				<text class="mr10">剩余时间</text>
				<image :src="`/static/${seckill_remain_time == 'desc' ? 'desc' : seckill_remain_time == '' ? 'sort' : 'asc'}.png`" mode="widthFix"></image>
			</span> -->
			<span class=" flex align-center justify-center" @tap="filterOrder(1)">
				<text class="mr10">价格</text>
				<image :src="`/static/${price == 'desc' ? 'desc' : price == '' ? 'sort' : 'asc'}.png`" mode="widthFix"></image>
			</span>
			<span class=" flex align-center justify-center" @tap="filterOrder(2)">
				<text class="mr10">销量</text>
				<image :src="`/static/${total_sales == 'desc' ? 'desc' : total_sales == '' ? 'sort' : 'asc'}.png`" mode="widthFix"></image>
			</span>
			<span class=" flex align-center justify-center" @tap="filterOrder(3)">
				<text class="mr10">库存</text>
				<image :src="`/static/${stock == 'desc' ? 'desc' : stock == '' ? 'sort' : 'asc'}.png`" mode="widthFix"></image>
			</span>
		</view>
	</view>
</template>

<script>
import filterIcon from '@/components/filter-icon.vue';
import { mapState } from 'vuex';
export default {
	name: 'skillprofilterbar',
	data() {
		return {
			navHeight: 50,
			seckill_remain_time: '',
			total_sales: '',
			price: '',
			stock: ''
		};
	},
	components: { filterIcon },
	computed: {
		...mapState(['CustomBar'])
	},
	props: {
		toTop: {
			type: [String, Number],
			default: 0
		}
	},
	mounted() {},
	methods: {
		filterOrder(type) {
			switch (type) {
				case 0: {
					if (this.seckill_remain_time == 'desc') {
						this.seckill_remain_time = 'asc';
					} else if (this.seckill_remain_time == 'asc') {
						this.seckill_remain_time = '';
					} else {
						this.seckill_remain_time = 'desc';
					}
					this.total_sales = '';
					this.price = '';
					this.stock = '';
					break;
				}
				case 1: {
					if (this.price == 'desc') {
						this.price = 'asc';
					} else if (this.price == 'asc') {
						this.price = '';
					} else {
						this.price = 'desc';
					}
					this.total_sales = '';
					this.stock = '';
					this.seckill_remain_time = '';
					break;
				}
				case 2: {
					if (this.total_sales == 'desc') {
						this.total_sales = 'asc';
					} else if (this.total_sales == 'asc') {
						this.total_sales = '';
					} else {
						this.total_sales = 'desc';
					}
					this.price = '';
					this.stock = '';
					this.seckill_remain_time = '';
					break;
				}
				case 3: {
					if (this.stock == 'desc') {
						this.stock = 'asc';
					} else if (this.stock == 'asc') {
						this.stock = '';
					} else {
						this.stock = 'desc';
					}
					this.price = '';
					this.total_sales = '';
					this.seckill_remain_time = '';
					break;
				}
			}
			let { seckill_remain_time, price, total_sales, stock } = this;
			let param = { seckill_remain_time, price, total_sales, stock };
			this.$emit('changeFilrer', param);
		}
	}
};
</script>

<style scoped lang="scss">
.filterbar {
	padding: 32upx 28upx;
	span {
		color: #fff;
		font-size: 32upx;
	}
	image {
		width: 26upx;
		height: 26upx;
		margin-left: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.filter {
		image {
			width: 26upx;
		}
	}
}
</style>
